<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{ msg }}</h1>
</div>
<div id="newsList">
    <h2>资讯列表</h2>
    <hr>
    <ul v-for="ele in newsList">
        <li>序号：{{ ele._id }}</li>
        <li>名称：{{ ele.title }}</li>
        <li>作者：{{ ele.author }}</li>
    </ul>
</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    // 传统的思想，我们是vuejs作为一个字符串处理工具使用

    // 需求：把 接口数据通过vuejs进行处理，在页面渲染
    // 1. 编写一个调用接口的方法
    // 2. 执行该方法，获取接口数据
    // 3. 然后把数据交给 vuejs data进行管理
    // 4. 使用 v-for指令把data里面的接口数据遍历

    async function getNewsList() {
        let url = 'https://yw.52kfw.cn/api/news/flist?pageSize=5&cate_id=%E7%A7%91%E6%8A%80%E5%85%B4%E5%9B%BD';

        let info = await axios.get(url);

        let newsList = info.data.data.list;

        // 传统的操作，dom操作，字符串拼接

        // 使用vuejs完成
        new Vue({
            el: '#newsList',
            data: {
                newsList,
            }
        })


    }

    getNewsList();


</script>

</html>
